<template>
	<view @touchmove.stop.prevent="clear">
		<!-- 选择商品规格组件LQQ -->
		<view class="flex flex-y-end" v-if="show" @tap="close()"
			style="position: fixed;z-index: 9999;width: 750rpx;height: 100vh;background-color: rgba(0,0,0,0.5);overflow: hidden;"
			:style="{'bottom':bottom}">
			<view @tap.stop="clear" style="width: 750rpx;background-color: #FFFFFF;border-radius: 16rpx 16rpx 0 0;"
				class="show-top">
				<!-- s商品图片，规格 -->
				<view v-if="sku_list.length>0">
					<view class="flex" style="height: 146rpx;">
						<!-- sku图片 -->
						<view
							style="height: 220rpx;height: 220rpx;overflow: hidden;margin-left: 36rpx;transform: translateY(-74rpx);">
							<image @tap.stop="preview_img(image || sku_list[checked_index].pic)"
								style="width: 220rpx;height: 220rpx;border: 4rpx solid #000000;" mode="aspectFill"
								:src=" image || sku_list[checked_index].pic"></image>
						</view>

						<view class="flex flex-1" style="padding-left: 32rpx;margin-top: 20rpx;">
							<!-- sku价格 -->
							<view style="width:390rpx;">
								<view class="flex flex-y-end">
									<view class="color-000000" style="font-weight: 550;">
										<text class="fs-24">¥ </text>
										<text
											style="font-size: 44rpx;">{{xs(sku_list[checked_index].price,2,0)}}.</text>
										<text class="fs-24">{{xs(sku_list[checked_index].price,2,1)}}</text>
									</view>
									<!--补贴 佣金 -->
									<!-- 商品下架不显示分红和现金补贴 -->
									<template v-if="(goods.g_status && goods.g_status != 5) || !goods.g_status">
										<view @tap.stop="show_msg()"
											v-if="show_commission && sku_list[checked_index].c1"
											class="flex flex-y-center color-red" style="margin-left: 18rpx;">
											<text class="fs-24">/ 分红 ¥</text>
											<text class="fs-30 bold">{{sku_list[checked_index].c1}}</text>
										</view>
										<view v-else-if="goods.g_status == 8" class="flex flex-y-center"
											style="color: #00C35C;margin-left: 18rpx;">
											<text class="fs-24">/领津贴¥</text>
											<text
												class="fs-30 bold">{{xs(sku_list[checked_index].group_buy_subsidy,1)}}</text>
											<text class="iconfont icon-gengduo2 fs-30"
												style="margin-left: 10rpx;"></text>
										</view>
										<view v-else-if="goods.is_pre == 1" @tap.stop="show_detail"
											class="flex flex-y-center" style="color: #00C35C;margin-left: 18rpx;">
											<text class="fs-24">/现金返还¥</text>
											<!-- <text class="fs-30 bold">{{xs(sku_list[checked_index].s1,1)}}</text> -->
											<text class="fs-30 bold">{{xs(sku_list[checked_index].total_c1,1)}}</text>
											<text class="iconfont icon-gengduo2 fs-30"
												style="margin-left: 10rpx;"></text>
										</view>

										<view v-else-if="goods.review_money > 0" class="flex flex-y-center color-red"
											style="margin-left: 18rpx;">
											<text class="fs-24">/真实评价¥</text>
											<text class="fs-30 bold">{{xs(goods.review_money,1)}}</text>
											<text class="fs-24"> 元</text>
										</view>
									</template>
								</view>
								<view v-if="goods.min_price && goods.max_price" class="fs-24  mt-10 text-hidden"
									style="color: #646464;">
									参考市价：{{xs(goods.min_price,-1)}}~{{xs(goods.max_price,-1)}}元比测
								</view>
							</view>
							<!-- 关闭按钮 -->
							<view>
								<view class="iconfont icon-cuo" @tap.stop="close()"
									style="color: #989898;font-size: 32rpx;padding:15rpx;transform: translate(4rpx,-8rpx);">
								</view>
							</view>

						</view>
					</view>


					<!-- 规格列表 -->
					<scroll-view
						style="padding:40rpx 0rpx 0rpx 36rpx;width: 100%;min-height: 300rpx;max-height: 600rpx;"
						:scroll-y="true">
						<view>
							<view v-for="(item,key,index) in attr_group_list" :key="index" class="sku-list">
								<!-- 规格名 -->
								<view class="fs-30 color-000000 bold">{{key || '规格'}}</view>
								<!-- 规格属性 -->
								<view>
									<view class="sku-list-item" @tap.stop="choose(key,attr_index,attr.is_null)"
										:class="{'sku-list-item-disable':attr.is_null,'sku-list-item-checked':attr.checked}"
										v-for="(attr,attr_index) in attr_group_list[key].attr_list" :key="attr_index">
										{{attr.attr_name || ''}}
									</view>
								</view>
							</view>
						</view>
						<view style="height: 60rpx;"></view>
					</scroll-view>

					<!-- 数量 -->
					<view v-if="showNum" class="pr flex flex-x-b flex-y-center"
						style="padding:60rpx 36rpx 40rpx 36rpx;z-index: 3;background-color: #FFFFFF;">
						<view class="color-000000 fs-30 bold">数量</view>

						<view class="flex flex-y-center color-000000">
							<text class="iconfont icon-jian fs-50" :style="num == 1?'color:#E8E8E8;':''"
								@tap.stop="reduce"></text>
							<text class="fs-30 bold" style="padding: 0 18rpx;">{{num}}</text>
							<text class="iconfont icon-jia fs-50" @tap.stop="add"></text>
						</view>
					</view>
					<view v-else style="height: 30rpx;"></view>

				</view>
				<!-- 确定按钮 -->
				<view v-if="showBtn" @tap.stop="sure" class="sku-sure">确定</view>
			</view>
		</view>
		<!-- <toast ref="toast"></toast> -->
	</view>
</template>

<script>
	export default {
		name: "sku",
		data() {
			return {
				show: false,
				sku_list: [],
				attr_group_list: {},
				type: 1, //1默认 2只能选择一个商品
				num: 1,
				checked_index: 0,
				choose_sku: null,
				image: '', //
			};
		},
		props: {
			bottom: {
				type: String,
				default: '0'
			},
			showBtn: {
				type: Boolean,
				default: true,
			},
			showNum: {
				type: Boolean,
				default: true,
			},
			goods: {
				type: Object,
				default: () => {
					return {

					}
				}
			}
		},
		methods: {
			show_detail() {
				// this.$emit('buy_now_fail');
			},
			//关闭
			close() {
				this.show = false;

				this.$emit('close');

			},
			open() {

				// if (this.sku_list.length == 0) {
				// 	// this.showToast('没有规格可以选择哦');
				// 	return;
				// }
				this.show = true;
			},
			init(attr_group_list = {}, sku_list = [], type = "", sku = "", num = "") {
				this.setData({
					sku_list: [],
					attr_group_list: {},
					type: 1, //1默认 2只能选择一个商品
					num: 1,
					checked_index: 0,
					choose_sku: null,
					image: "",
				})
				this.attr_group_list = attr_group_list;
				this.sku_list = sku_list;

				if (num) {
					console.log('num', num)
					this.num = num;
				}
				this.refresh_attr();

				//只有一个规格时默认选择
				if (this.sku_list.length == 1 && this.sku_list[0].num > 0) {
					this.choose_one();
				}

				if (sku) {
					this.choose_by_sku(sku);
				}



			},
			//更新更新规格选中器样式
			refresh_attr() {
				let attr_group_list = this.attr_group_list;
				let sku_list = this.sku_list;
				let check_arr = this.get_checked_arr(attr_group_list);
				let index = 0;
				for (let key in attr_group_list) {
					let checked_name = "NULL";
					attr_group_list[key].attr_list.forEach(val => {
						let new_arr = this.clone(check_arr);
						new_arr[index] = val.attr_name;
						val.is_null = !this.have(new_arr)
					})
					index++;
				}
				this.attr_group_list = attr_group_list;

			},
			//判断属性组合是否存在
			have(arr) {
				//判断是否有库存
				let have_ = false;
				let null_length = arr.filter(val => val == 'NULL').length;
				this.sku_list.some(val => {
					let has_length = arr.length - null_length;
					val.attr_list.forEach(attr => {
						if (arr.includes(attr.attr_name)) {
							has_length--;
						}
					})
					if (has_length == 0 && val.num > 0) {

						have_ = true;

						return true;
					}
					return false;
				})


				return have_;
			},
			//获取已选中的属性值素组，一维数组
			get_checked_arr(attr_group_list) {
				let checked_arr = []; //['蓝色','M']
				for (let key in attr_group_list) {
					let checked_name = "NULL";
					attr_group_list[key].attr_list.some(val => {
						if (val.checked == true) {
							checked_name = val.attr_name;
							return true;
						}
						return false;
					})
					checked_arr.push(checked_name);
				}
				return checked_arr;
			},
			//只选择唯一一个
			choose_one() {
				let attr_group_list = this.attr_group_list;
				for (let key in attr_group_list) {
					attr_group_list[key].attr_list[0].checked = true;
				}
				this.checked_index = 0;
				this.choose_sku = this.sku_list[0].sku;
			},
			choose(key1, index, is_null) {
				if (is_null) {
					console.log('库存不足')
					this.showToast('库存不足');
					return;

				}
				let attr_group_list = this.attr_group_list;



				for (let key in attr_group_list) {
					attr_group_list[key].attr_list.forEach((val, ind) => {
						if (key == key1) {
							if (ind == index) {
								if (val.checked == true) {
									val.checked = !val.checked;

								} else
									val.checked = true;
							} else {
								val.checked = false;
							}
						}


					})
				}
				this.attr_group_list = this.clone(attr_group_list);
				this.refresh_attr();

				let checked_index = this.get_checked_index();
				if (checked_index > -1) {
					this.checked_index = checked_index;
					if (this.num > this.sku_list[checked_index].num)
						this.num = parseInt(this.sku_list[checked_index].num);
					this.choose_sku = this.sku_list[checked_index].sku;
					this.image = "";
					this.$emit('change', {
						num: this.num,
						goods: this.clone(this.sku_list[this.checked_index])
					})
				} else {
					//未定位到所选 sku ，这里用第一属性定位图片
					console.log('规格未选择完整，采用第一属性图片')
					let key_arr = Object.keys(this.attr_group_list);
					if (this.attr_group_list[key_arr[0]]) {
						let attr_name = '';
						this.attr_group_list[key_arr[0]].attr_list.forEach(val => {
							if (val.checked == true) {
								attr_name = val.attr_name;
							}
						})
						console.log('attr_name', attr_name)
						this.sku_list.some(val => {
							if (val.attr_list.some(attr => {
									if (attr.attr_name == attr_name) {
										this.image = val.pic;
										return true;
									}
									return false;
								}))
								return false;
						})
					}
				}
			},
			get_checked_index() {
				let arr = this.get_checked_arr(this.attr_group_list);

				let checked_index = -1;

				this.sku_list.some((val, index) => {
					let has_length = arr.length;
					val.attr_list.forEach(attr => {
						if (arr.includes(attr.attr_name)) {
							has_length--;
						}
					})
					if (has_length == 0) {
						checked_index = index;

						return true;
					}
					return false;
				})

				console.log('已选中', checked_index);
				return checked_index;
			},
			reduce() {
				if (this.num > 1) {
					this.num = this.num - 1;
				}
			},
			add() {
				if (this.goods.g_status == 1) {
					this.showToast("一次只能购买一件哦");
					return;
				}

				if (this.choose_sku) {
					let sku_num = this.sku_list[this.checked_index].num;
					if (this.num < sku_num)
						this.num = this.num + 1;
					else {
						this.showToast('不能再买啦，商品库存不足');
					}
				} else {
					this.num = this.num + 1;
				}
			},
			//通过sku来选择
			choose_by_sku(sku) {
				let obj = {};
				this.sku_list.some((val, index) => {

					if (val.sku == sku && val.num > 0) {
						this.checked_index = index;
						this.choose_sku = val.sku;
						val.attr_list.forEach(attr => {
							obj[attr.attr_group_name] = attr.attr_name;
						})
						return true;
					}
					return false;
				})
				let attr_group_list = this.attr_group_list;
				for (let key in attr_group_list) {
					attr_group_list[key].attr_list.forEach((val, ind) => {
						if (val.attr_name == obj[key]) {
							val.checked = true;
						} else {
							val.checked = false;
						}
					})
				}
				this.attr_group_list = this.clone(attr_group_list);
				this.refresh_attr();

			},
			//检查有哪些未选中
			check_attr() {
				if (this.show == false) {
					this.show = true;
					return false;
				}

				let attr_group_list = this.attr_group_list;
				for (let key in attr_group_list) {
					if (!attr_group_list[key].attr_list.some(val => val.checked)) {
						this.showToast('请选择' + key, 2500);
						this.show = true;
						return false;

					}
				}
				return true;
			},
			add_cart() {
				if (this.login())
					return;
				if (this.goods.g_status == 1 && (this.user_info.status < 1 || this.user_info.integral < 500)) {
					this.close();
					this.$emit('buy_now_fail');
					return;
				}
				if (this.check_attr()) {
					this.less(() => {
						this.getApp().request({
							url: '/cart/save',
							method: 'POST',
							data: {
								goods_id: this.sku_list[this.checked_index].goods_id,
								sku: this.choose_sku,
								num: this.num,
								is_sel: this.type
							},
							success: res => {
								if (res.code == 0) {
									//更新购物车
									this.show = false;
									this.$store.dispatch('refresh');
									this.showToast('添加成功', 2500);
								}
							},
						});
					});
				}
			},
			buy_now() {
				if (this.login())
					return;

				if (this.show == false) {
					this.open();
					return;
				}

				if ((this.goods.g_status == 8 || this.goods.g_status == 10) && this.num > 1) {
					this.showToast('只能拼一件商品哦');
					return;
				}

				if (this.goods.g_status == 1 && (this.user_info.status < 1 || this.user_info.integral < 500)) {
					this.close();
					this.$emit('buy_now_fail');
					return;
				}

				if (this.check_attr()) {
					this.less(() => {
						this.show = false;
						this.$emit('close');
						let goods_list = [{
							goods_id: this.sku_list[this.checked_index].goods_id,
							cart_id: "",
							num: this.num,
							sku: this.choose_sku,
							from: 1,
							// group_buy_parent_id: group_buy_parent_id || '',
						}]
						let group_buy_parent_id = this.goods.group_buy_parent_id || '';
						if (this.goods.is_success) {
							group_buy_parent_id = 0
						}
						this.toPage('/pages/submit/submit?goods_list=' + JSON.stringify(goods_list) +
							'&group_buy_parent_id=' + group_buy_parent_id);

					});
				}
			},
			sure() {
				if (!this.check_attr())
					return;
				this.show = false;
				this.$emit('sure', {
					num: this.num,
					goods: this.clone(this.sku_list[this.checked_index])
				})
			},
			preview_img(img) {
				let arr = this.sku_list.map(val => val.pic);
				arr = Array.from(new Set(arr));
				uni.previewImage({
					current: img,
					urls: arr
				})
			},
			//不拼团单独购买
			buy_now_myself() {
				if (this.login())
					return;

				if (this.show == false) {
					this.open();
					return;
				}

				if (this.goods.g_status == 1 && this.user_info.status == 0) {
					this.close();
					this.$emit('buy_now_fail');
					return;

				}

				if (this.check_attr()) {
					this.less(() => {
						this.show = false;
						let goods_list = [{
							goods_id: this.sku_list[this.checked_index].goods_id,
							cart_id: "",
							num: this.num,
							sku: this.choose_sku,
							from: 1,
							// group_buy_parent_id: group_buy_parent_id || '',
						}]
						let group_buy_parent_id = this.goods.group_buy_parent_id || '';
						this.toPage('/pages/submit/submit?goods_list=' + JSON.stringify(goods_list) +
							'&group_buy_parent_id=' + group_buy_parent_id + '&is_direct_buy_group=1');

					});
				}
			},
		}
	}
</script>

<style scoped>
	.sku-sure {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FD4F4C;
		color: #FFFFFF;
		font-weight: 550;
		font-size: 30rpx;
		z-index: 2;
		position: relative;
	}

	.sku-list-item {
		display: inline-block;
		height: 60rpx;
		border-radius: 30rpx;
		border: 2rpx solid #000000;
		color: #000000;
		font-size: 28rpx;
		margin-top: 32rpx;
		margin-right: 24rpx;
		padding: 10rpx 28rpx;
		box-sizing: border-box;
	}

	.sku-list-item-disable {
		border-color: #EEEEEE;
		background-color: #EEEEEE;
		height: 60rpx;
	}

	.sku-list-item-checked {
		background-color: #000000;
		color: #FFFFFF;
		height: 60rpx;
	}

	.show-top {
		animation: totop 0.4s;
	}

	@keyframes totop {
		from {
			transform: translateY(500rpx);
		}

		to {
			transform: translateY(0rpx);
		}
	}

	.sku-list+.sku-list {
		margin-top: 40rpx;
	}
</style>